<!--
创建问题页面
-->
<template>
  <div id="question-outer-box">
    <div
      style="
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      "
    >
      <a-form
        ref="formRef"
        :model="formData"
        style="width: 70%"
        @submit="handleSubmit"
      >
        <a-form-item field="title" label="题目标题">
          <a-input v-model="formData.title" placeholder="题目标题" />
        </a-form-item>
        <a-form-item field="title" label="题目标题">
          <a-input-tag
            v-model="formData.tags"
            :style="{ width: '320px' }"
            placeholder="Please Enter"
            allow-clear
          />
        </a-form-item>
        <a-divider />
        <a-form-item field="content" label="题目描述">
          <MarkdownEditor
            style="width: 100%"
            :value="formData.content"
            :handle-change="contentHandleChange"
          ></MarkdownEditor>
        </a-form-item>
        <a-divider />

        <a-form-item
          label="性能限制"
          :content-flex="false"
          :merge-props="false"
        >
          <a-space direction="vertical" fill>
            <a-form-item field="judgeConfig.memoryLimit" label="内存限制(mb)">
              <a-input
                v-model="formData.judgeConfig.memoryLimit"
                placeholder="内存限制"
              />
            </a-form-item>
            <a-form-item field="judgeConfig.timeLimit" label="时间限制(ms)">
              <a-input
                v-model="formData.judgeConfig.timeLimit"
                placeholder="时间限制"
              />
            </a-form-item>
            <a-form-item field="judgeConfig.stackLimit" label="堆栈限制">
              <a-input
                v-model="formData.judgeConfig.stackLimit"
                placeholder="堆栈限制"
              />
            </a-form-item>
          </a-space>
        </a-form-item>
        <a-divider />

        <a-form-item
          v-for="(item, index) of formData.judgeCase"
          :field="`judgeCase[${index}].value`"
          :label="`测试用例${index + 1}`"
          :key="index"
        >
          <a-space>
            <a-form-item field="input" label="输入">
              <a-textarea
                v-model="item.input"
                placeholder="输入用例"
                allow-clear
                show-word-limit
                style="width: 100%"
              />
            </a-form-item>
            <a-form-item field="output" label="输出">
              <a-textarea
                v-model="item.output"
                placeholder="输出用例"
                allow-clear
                show-word-limit
              />
            </a-form-item>
          </a-space>
          <a-button
            @click="caseHandleDelete(index)"
            :style="{ marginLeft: '10px' }"
            type="primary"
            status="danger"
            >删除用例
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="caseHandleAdd" type="outline">添加用例</a-button>
        </a-form-item>
        <a-divider />

        <a-form-item field="answer" label="参考答案">
          <a-textarea v-model="formData.answer" placeholder="参考答案" />
        </a-form-item>

        <a-form-item>
          <a-button html-type="submit" type="primary" status="success"
            >{{ updateFlag === true ? "更新" : "创建" }}
          </a-button>
          <a-button style="margin: 0 10px" @click="formRef.resetFields()"
            >重置
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
// {
//   "answer": "",
//   "content": "",
//   "judgeCase": [
//     {
//       "input": "",
//       "output": ""
//     }
//   ],
//   "judgeConfig": {
//     "memoryLimit": 0,
//     "stackLimit": 0,
//     "timeLimit": 0
//   },
//   "tags": [],
//   "title": ""
// }

import { onMounted, reactive, ref } from "vue";
import MarkdownEditor from "@/components/MarkdownEditor.vue";
import { QuestionControllerService } from "../../generated";
import { Message } from "@arco-design/web-vue";
import { useRoute } from "vue-router";

let formRef = ref();

let route = useRoute();
let updateFlag = route.path.includes("update");
let id = ref(route.params.id);
if (updateFlag) {
  // let { id } = defineProps(["id"]);
  console.log("route.params.id:", route.params.id);
  console.log("是否为修改：", updateFlag);
}

const testData = {
  answer: "打家劫舍3",
  content: "打家劫舍打家劫舍打家劫舍打家劫舍",
  judgeCase: [
    {
      input: "2 2",
      output: "4",
    },
  ],
  judgeConfig: {
    memoryLimit: 1000,
    stackLimit: 1000,
    timeLimit: 1000,
  },
  tags: ["动态规划", "困难"],
  title: "2024年5月26日16:39:00",
};

const formData = reactive({
  title: "",
  content: "",
  judgeCase: [],
  answer: "",
  judgeConfig: {
    memoryLimit: 1000,
    stackLimit: 1000,
    timeLimit: 1000,
  },
  tags: ["简单"],
});
const handleSubmit = () => {
  // console.log(formData);

  if (updateFlag) {
    //   发送更新请求
    QuestionControllerService.updateQuestionUsingPost(formData).then(
      (res) => {
        if (res.code == 0) {
          Message.success("更新题目成功！");
          getDataById();
        } else {
          Message.error(res.message);
        }
      },
      (err) => {
        console.log("err:", err);
        Message.error("更新题目失败！");
      }
    );
  } else {
    QuestionControllerService.addQuestionUsingPost(formData).then(
      (res) => {
        if (res.code == 0) {
          Message.success("创建题目成功！");
        } else {
          Message.error(res.message);
        }
      },
      (err) => {
        console.log("err:", err);
        Message.error("创建题目失败！");
      }
    );
  }
};

onMounted(() => {
  if (updateFlag) {
    //   如果为修改就先请求当前id的题目数据
    getDataById();
  }
});

let getDataById = async () => {
  let res = await QuestionControllerService.getQuestionVoByIdUsingGet(id.value);
  if (res.code === 0) {
    console.log(res);
    Object.assign(formData, res.data);
    // Message.success("获取题目成功！");
  } else {
    Message.error(res.message);
  }
};

// 使用示例

let test = async () => {
  // console.log("test：",data);
  // QuestionControllerService.addQuestionUsingPost(data).then(
  //   (res) => {
  //     console.log("ok:", res);
  //   },
  //   (err) => {
  //     console.log("err:", err);
  //   }
  // );
};

let contentHandleChange = (v: string) => {
  formData.content = v;
  console.log(formData.content);
};

const caseHandleAdd = () => {
  formData.judgeCase.push({
    input: "",
    output: "",
  });
};

const caseHandleDelete = (index: number) => {
  formData.judgeCase.splice(index, 1);
};
</script>

<style scoped></style>
